<template>
  <el-container class="main-container">
    <!-- 左侧菜单栏 -->
    <el-aside :width="isCollapsed ? '50px' : '200px'" class="sidebar">
      <el-menu
        :collapse="isCollapsed"
        :collapse-transition="false"
        :default-active="activeMenuIndex"
        class="menu"
      >
         <side-bar :menu="dbMenu"></side-bar>
      </el-menu>
    </el-aside>

    <!-- 主内容区 -->
    <el-container class="content-container">
      <!-- 顶部栏 -->
      <el-header class="top-header">
        <div>
          <div class="breadcrumb">
           <!-- 收缩按钮 -->
          <el-icon :size="20" class="toggle-icon" @click="toggleSidebar"><Grid /></el-icon>
          <!-- 面包屑 -->
            <el-breadcrumb separator="/">
              <el-breadcrumb-item :to="{path:item.path}" v-for="item in breadCrumb">{{item.meta.title}}</el-breadcrumb-item>
            </el-breadcrumb>
          </div>
          <!--tags-->
          <div>
            <tab-bar></tab-bar>
          </div>
        </div>
        
        <!-- 用户信息 -->
        <div class="user-info">
          <el-avatar src="https://tcmoshou.com/Public/static/image/my/banner/1.jpeg" />
          <el-dropdown>
          <span class="el-dropdown-link">
          <span>{{ userInfo.username }}</span>
            <el-icon class="el-icon--right">
              <arrow-down />
            </el-icon>
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item>个人信息</el-dropdown-item>
              <el-dropdown-item @click="logout">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
        </div>
      </el-header>

      <!-- 内容区域 -->
      <el-main class="main-content">
        <router-view />
      </el-main>
    </el-container>
  </el-container>
</template>

<script setup>
import { ref , watch} from 'vue';
import {Grid } from '@element-plus/icons-vue';
import { useRoute,useRouter } from 'vue-router';
import {useGlobalStore} from '@/store/userInfo'
import API from '@/utils/api'
import SideBar from '@/components/SideBar/Index.vue'
import TabBar from '@/components/TabBar/index.vue'
import { useTabStore } from '@/store/tabs'

const tabStore = useTabStore()

//登录进来获取的用户菜单
const globalData = useGlobalStore();
const userInfo = ref({})
const route = useRoute();
const router = useRouter();
let dbMenu = router.options.routes[0].children
const loadUserInfo = ()=>{
  //首页加载进来的时候将用户基本信息写入
  API.getUserBaseInfo().then(res=>{
    globalData.userInfo = res.userInfo;
    globalData.perms = res.perms;
    globalData.roles = res.roles
    userInfo.value = res.userInfo
  })
}
loadUserInfo()

//菜单项
const isCollapsed = ref(false); // 控制侧边栏的展开/收缩状态


const toggleSidebar = () => {
  isCollapsed.value = !isCollapsed.value;
};
const routeMatch = ref(route.matched)

//面包屑（过滤掉/的路由）
const breadCrumb = ref(route.matched.filter(item=>!item.meta.notShowTab))
 // 当前激活的菜单项
const activeMenuIndex = ref(routeMatch.value[routeMatch.value.length-1].name||'Index');
// 监听路由变化
watch(()=>route.path,(newPath)=>{
    breadCrumb.value =route.matched.filter(item=>!item.meta.notShowTab);
    //被点击激活的菜单索引
    tabStore.activeTabIndex = breadCrumb.value[breadCrumb.value.length-1].name
})
//用户tag和菜单index切换回显
watch(()=>tabStore.activeTabIndex,(newVal)=>{
  activeMenuIndex.value = newVal
})


const logout = () => {
	// 退出登录
	//API.logout()
	// 清空全局数据
	// globalData.userInfo = {}
	// globalData.perms = []
	// globalData.roles = []
  // globalData.menus = []
  globalData.$reset()
  tabStore.closeAll()

	// 跳转到登录页
	router.push('/login')
}

</script>

<style scoped>
.main-container {
  height: 100vh;
  display: flex;
}

.sidebar {
  background-color: #ffffff;
  transition: width 0.5s ease;
}

.menu {
  height: 100%;
}

.top-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  background-color: #ffffff;
  box-shadow: 0 2px 4px rgba(247, 246, 246, 0.1);
}

.toggle-icon {
  cursor: pointer;
  margin-right: 10px;
}

.breadcrumb {
  display: flex;
  flex-grow: 1;
}

.user-info {
  display: flex;
  align-items: center;
}

.user-info .el-avatar {
  margin-right: 10px;
}

.main-content {
  background-color: #f0f2f5;
  padding: 0;
  transition: margin-left 0.3s ease;
}
.example-showcase .el-dropdown-link {
  cursor: pointer;
  color: var(--el-color-primary);
  display: flex;
  align-items: center;
}
</style>